<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
    
  </style>
</head>
<body>


</body>
<script src="js/axios.min.js"></script>
<script>
  
  // 传统get请求
  axios.get('http://localhost:3000/axios?id=10')
    .then(function (res) {
      console.log(res.data)
    })

  // 传统get请求，axios特殊传参方法
  axios.get('http://localhost:3000/axios',{
      params:{
        id:20
      }
    })
    .then(function (res) {
      console.log(res.data)
    })

  // restful的get请求
  axios.get('http://localhost:3000/axios/30')
    .then(function (res) {
      console.log(res.data)
    })
  
  // restful的delete请求
  axios.delete('http://localhost:3000/axios',{
    params:{
      id:40
    }
  })
    .then(function (res) {
      console.log(res.data)
    })

// 传统post提交
  axios.post('http://localhost:3000/axios',{
    name:'zhangsan',
    pwd:123456
  })
    .then(function (res) {
      console.log(res.data)
    })
  
  //数据封装到URLSearchParams实例对象中，post提交
  var params = new URLSearchParams();
  params.append('name','lisi');
  params.append('pwd',222222);
  axios.post('http://localhost:3000/axios',params)
    .then(function (res) {
      console.log(res.data)
    })
  
  // put提交
  axios.put('http://localhost:3000/axios/111',{
    name:'wangwu',
    pwd:'444444'
  })
    .then(function (res) {
      console.log(res.data)
    })
  
  //  axios配置
  //  默认地址
  axios.defaults.baseURL = "http://localhost:3000"
  axios.defaults.headers['mytoken'] = '11111111111'
  axios.get('/axios-json')
    .then(function (res) {
      console.log(res.data)
    })

  //请求拦截器，可以设置客户端数据
  axios.interceptors.request.use(function (config) {
    console.log(config.url)
    config.headers.mytoken = 'nihao'
    return config
  },function (err) {
    console.log(err)
  })

  // 响应拦截器，可以将服务端返回的数据进行处理
  axios.interceptors.response.use(function (res) {
    var data = res.data
    return data
  },function (err) {
    console.log(err)
  })
  
  // 通过响应拦截器处理，返回的是处理后数据
  axios.get('http://localhost:3000/axios-json')
    .then(function (res) {
      console.log(res)
    })
  

  // 全局配置路径
  axios.defaults.baseURL = 'http://localhost:3000'
  // async与await使用
  async function queryData1() {
    var res = await axios.get('/axios-json')
    return res.data
  }
  // 打印获取的数据
  queryData1().then(function (data) {
    console.log(data)
  })
  
  // await后面使用promise
  async function queryData2(){
    var res = await new Promise(function (resolve,reject) {
      setTimeout(function () {
        resolve('11111')
      },1000)
    })
    return res
  }
  // 打印获取的数据
  queryData2().then(function (data) {
    console.log(data)
  })

  // 处理多个异步请求，其中一个异步请求获取数据是另外一个的参数
  async function queryData3(){
    var res1 = await axios.get('/async1')
    var res2 = await axios.get('/async2?info='+res1.data)
    return res2.data
  }
  // 打印获取的数据
  queryData3().then(function (data) {
    console.log(data)
  })
</script>
</html>
